<template>
  <el-card shadow="always" class="center">
    <div class="avatar">
      <img src="../../../assets/images/beijing.jpg" />
      <img src="../../../assets/images/gaoda.png" class="bg" />
      <div class="avatar-img">
        <img :src="store.state.webInfo.avatar" />
      </div>
    </div>
    <div class="info">
      <div class="username">
        <span>{{ store.state.webInfo.name }}</span>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="博主"
          placement="right"
        >
          <svg-icon name="bozhu" class="svg"></svg-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="saying">
      <span :title="store.state.webInfo.proverb" class="saying">
        {{ store.state.webInfo.proverb }}
      </span>
    </div>
    <div class="icon-list">
      <template v-if="list.length > 0">
        <a v-for="item in list" href="#"
          ><svg-icon :name="item.name" width="18" height="18"></svg-icon
        ></a>
      </template>
    </div>
    <div class="btn">
      <el-button>加入书签</el-button>
    </div>
  </el-card>
</template>
<script setup>
import {useStore} from "vuex"
const store = useStore();
let list = [
  {
    name: "github",
    link: "",
  },
  {
    name: "gitee",
    link: "",
  },
  {
    name: "qq",
    link: "",
  },
  {
    name: "email",
    link: "",
  },
  {
    name: "weibo",
    link: "",
  },
  {
    name: "zhihu",
    link: "",
  },
];
</script>
<style lang="scss" scoped>
@keyframes scaleSvg {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes infoShadow {
  0% {
    box-shadow: inset 0px 0px 5px 1px $strong; //inset设置为内阴影
  }
  100% {
    box-shadow: inset 0px 0px 8px 5px $strong; //inset设置为内阴影
  }
}

:deep .el-card__body {
  padding: 0;
}
// 个人中心
.center {
  margin-bottom: 20px;
  padding-bottom: 20px;
  flex: 2;
  transition: all 0.3s;
  img {
    width: 100%;
    height: 120px;
    object-fit: cover; //会放大或者缩小填满盒子
    // background-size:100% 100%; 不割
  }
  // 头像上半部分
  .avatar {
    position: relative;
    .bg {
      position: absolute;
      bottom: -12px;
      left: 50%;
      width: 75px;
      height: 120px;
      transform: translateX(-50%);
    }
    .avatar-img {
      box-sizing: border-box;
      position: absolute;
      border-radius: 50%;
      bottom: 12px;
      left: 50%;
      padding: 5px;
      transform: translateX(-50%);
      width: 75px;
      height: 75px;
      transition: all 1s;
      &:hover {
        // 如果使用动画的话，鼠标移开则没有回退原来的位置效果。
        transform: translateX(-50%) rotate(360deg);
      }
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
      }
    }
  }
  // 头像下半部分
  .info {
    width: 100%;
    .username {
      display: flex;
      margin-top: 10px;
      color: $strong;
      justify-content: center;
      span {
        margin-right: 10px;
      }
      .svg {
        :deep svg {
          cursor: pointer;
        }
      }
    }
  }
  .saying {
    padding: 0 20px;
    text-align: center;
    span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px;
      width: 100%;
      background: radial-gradient(
        circle at 49.86% 48.37%,
        #0090ff 0,
        #0089ff 3.33%,
        #3a82ff 6.67%,
        #717aff 10%,
        #9371fb 13.33%,
        #ae67ef 16.67%,
        #c45de1 20%,
        #d652d2 23.33%,
        #e448c2 26.67%,
        #ef3eb0 30%,
        #f7369e 33.33%,
        #fd318c 36.67%,
        #ff317a 40%,
        #ff3569 43.33%,
        #fd3d57 46.67%,
        #f94646 50%,
        #f35035 53.33%,
        #ea5a22 56.67%,
        #e16308 60%,
        #d56d00 63.33%,
        #c97500 66.67%,
        #bb7d00 70%,
        #ac8300 73.33%,
        #9d8900 76.67%,
        #8c8f00 80%,
        #7a9300 83.33%,
        #669700 86.67%,
        #4f9b00 90%,
        #309e0e 93.33%,
        #00a029 96.67%,
        #00a23d 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .btn {
    padding: 0 20px;
    margin-top: 5px;
    text-align: center;
    .el-button {
      width: 80%;
      transition: all 0.3s;
      position: relative;
      color: $strong;
      background: #fff;
      border: 1px solid $strong;
      padding: 0 20px;
      overflow: hidden;
      z-index: 1;
      &:hover {
        color: #fff;
        &::before {
          width: 180%;
        }
      }
      &::before {
        content: "";
        height: 100%;
        position: absolute;
        left: -30px;
        top: 0;
        background-color: $strong;
        transform: skewX(45deg); //斜切
        width: 0%;
        transition: all 1s;
        z-index: -1;
      }
    }
  }

  // 图标
  .icon-list {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    margin: 0 20px;
    margin-top: 10px;
    border-top: 1px solid #e4e7ed;
    a {
      margin: 0 10px;
    }
  }

  &:hover {
    box-shadow: 1px 1px 10px 5px $shadowcolor; //水平、垂直阴影、模糊大小、阴影大小
  }
}
</style>
